/*
 * @Description: 新增规则弹窗
 * @Author: Rfan
 * @Date: 2022-04-14 18:03:21
 * @LastEditTime: 2022-05-25 08:59:12
 */

import { useEffect, useState } from 'react';
import { Button, Checkbox, Divider, message, Modal, Tree, Typography } from 'antd';
import classNames from 'classnames/bind';
import type { FC, Key } from 'react';
import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
import type { ICommonDialog } from '@/interfaces/global';

import styles from './styles/index.module.scss';
import { fetchDepartmentListByUnitId } from '@/api/department';

const cx = classNames.bind(styles);

interface IMultiDepartmentDialogProps extends ICommonDialog {
  select: any;
}

const MultiDepartmentDialog: FC<IMultiDepartmentDialogProps> = (props) => {
  const { visible, select, onClose } = props;
  // 变更Flag
  const [changeFlag, setChangeFlag] = useState(false);
  // 全部功能权限列表，用于树展示
  const [treeData, setTreeData] = useState([]);
  // 角色已有的权限列表
  const [checkedList, setCheckedList] = useState([]);
  // 管理本部门
  const [manageMine, setManageMine] = useState(false);

  useEffect(() => {
    if (visible) {
      // request selected departments
      setManageMine(select?.manageSingleDept || false);
      setCheckedList(select?.deptIdList || []);
      // request all departments
      fetchDepartmentListByUnitId(4).then((res) => {
        setTreeData(res.data);
      });
    }
  }, [visible]);

  const onCancel = () => {
    setChangeFlag(false);
    onClose();
  };

  /**
   * @description: 管理本部门复选框点击方法
   * @param {CheckboxChangeEvent} evt
   */
  const onChange = (evt: CheckboxChangeEvent) => {
    setManageMine(evt.target.checked);
  };

  const onCheck = (checkedKeys: Key[]) => {
    setChangeFlag(true);
    setCheckedList(checkedKeys);
  };

  const saveRights = () => {
    if (checkedList.length <= 0 && !manageMine) {
      message.warning('请选择要管理的部门');

      return;
    }
    const params = {
      id: select.id,
      deptIdList: checkedList,
      manageSingleDept: manageMine,
      rights: select.rights
    };
    onClose(true, params);
  };

  return (
    <Modal
      title="选择可管理的部门"
      visible={visible}
      width={400}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          取消
        </Button>,
        <Button
          key="save"
          type="primary"
          disabled={!changeFlag}
          onClick={() => {
            saveRights();
          }}
        >
          确认
        </Button>
      ]}
    >
      <div className={cx('functional-tree')}>
        <Checkbox checked={manageMine} onChange={onChange}>
          可管理角色所在部门
        </Checkbox>
        <Typography.Paragraph type="secondary">
          选择后用户可管理自己所在部门的档案
        </Typography.Paragraph>
        <Divider />
        <p>
          指定可管理的部门{' '}
          <Typography.Text type="secondary">
            {checkedList.length > 0 ? `(已选${checkedList.length}个)` : ''}
          </Typography.Text>
        </p>
        {treeData.length > 0 && (
          <Tree
            key="id"
            checkable
            autoExpandParent
            selectable={false}
            checkedKeys={checkedList}
            onCheck={onCheck}
            treeData={treeData}
            fieldNames={{ key: 'id', title: 'deptName' }}
          />
        )}
      </div>
    </Modal>
  );
};

export default MultiDepartmentDialog;
